<template>
  <div id="nav-bar" class="nav-bar" :class="[navShow ? 'navOn' : 'navOff', backColorChange ? 'background1' : 'background2']">
    <div class="nav-menu">
      <div class="nav-menu-left">
        <div class="logo">
          <a href="/" title=" ">
            <img src="../assets/logo.svg" alt="" >
          </a>
        </div>
        <el-dropdown class="dropdown" size="large" placement="bottom-start">
          <span class="dropdown-link">页面</span>
          <template #dropdown>
            <el-dropdown-menu class="dropdown-link-menu">
              <el-dropdown-item @click="home"><el-icon><House /></el-icon>主页</el-dropdown-item>
              <el-dropdown-item divided @click="about"><el-icon><Warning /></el-icon>关于</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown class="dropdown" size="large" placement="bottom-start">
          <span class="dropdown-link">分类</span>
          <template #dropdown>
            <el-dropdown-menu class="dropdown-link-menu">
              <el-dropdown-item @click="classify">默认分类</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="nav-menu-right">
        <el-dropdown class="dropdown" size="large" :disabled="!isLogin">
          <span class="dropdown-link" @click="login"><el-icon size="20"><UserFilled /></el-icon>{{ isLogin ? store.name:'登录' }}</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="myBlog"><el-icon><User /></el-icon>我的主页</el-dropdown-item>
              <el-dropdown-item @click="profile"><el-icon><Postcard /></el-icon>用户设置</el-dropdown-item>
              <el-dropdown-item v-if="isAdmin" @click="admin"><el-icon><CoffeeCup /></el-icon>管理后台</el-dropdown-item>
              <el-dropdown-item divided @click="quit"><el-icon><SwitchButton /></el-icon>退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-tooltip content="写文章" v-if="isLogin">
          <el-dropdown class="dropdown" size="large" disabled>
            <span class="dropdown-link" @click="write"><el-icon size="20"><EditPen /></el-icon></span>
          </el-dropdown>
        </el-tooltip>
        <el-tooltip content="消息">
          <el-dropdown class="dropdown" size="large" disabled>
            <span class="dropdown-link" @click="message"><el-icon size="20"><ChatDotRound /></el-icon></span>
          </el-dropdown>
        </el-tooltip>
        <el-tooltip content="通知">
          <el-dropdown class="dropdown" size="large" disabled>
            <span class="dropdown-link" @click="notice"><el-icon size="20"><Bell /></el-icon></span>
          </el-dropdown>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElNotification } from 'element-plus';
import { ref, onMounted, watch, inject } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from '../stores';

// 初始化
onMounted(async () => {                             // 异步
  window.addEventListener('scroll', scrollHandle);  // 绑定页面滚动事件
  if(store.userToken) {                             // 判断登录状态
    isLogin.value = true
  }
})

// 判断是否登录 并监听登录状态
const isLogin = ref(false)  // showLoginItem
const store = useStore()    // 获取store
watch(
  () => store.userToken,
  (newVal, oldVal) => {
    if (newVal) {
      isLogin.value = true
    }
  }
)

// 判断是否为管理员
const isAdmin = ref(false)  // showAdminItem
watch(
  () => store.admin,
  (newVal, oldVal) => {
    isAdmin.value = newVal
})

// 控制menu样式变化
let top = ref(0)        // 获取top值
let navShow = ref(true) // menu显示
// 获取浏览器滚动
const scrollHandle = () => {
  top.value = document.documentElement.scrollTop || document.body.scrollTop || window.scrollX
}
// 监听top值的变化
let backColorChange = ref(true)
watch(
  top,(newValue,oldValue) =>{
    // 新值大于300显示背景色
    if (newValue > 300) {
      backColorChange.value = false
    } else {
      backColorChange.value = true
    }
    // 等新值大于400的时候再做变化
    if(newValue > 400){
      if(newValue > oldValue){
        navShow.value = false  // 向下滚动
      }else{
        navShow.value = true  // 向上滚动
      }
    }
  }
)

// 顶部按钮功能绑定
let router = useRouter()  // 获取路由
// login
const login = () => {
  if (!isLogin.value) {
    router.push({name: 'login'})
  }
}
// home
const home = () => router.push({name: 'home'})
// about
const about = () => router.push({name: 'about'})
// classify
const classify = () => router.push({name: 'select', query: { type: '默认分类' }})
// notice
const notice = () => {
  console.log('notice');
  ElNotification({
    title: '该功能还未实装',
    message: '努力开发中(つ﹏<。)',
    type: 'warning'
  })
}
// message
const message = () => router.push({name: 'chat'})
// write
const write = () => router.push({name: 'editblog'})
// MyBlog
const myBlog = () => router.push({name: 'user'})
// 个人信息
const profile = () => router.push({name: 'profileInfo'})
// 管理后台
const admin = () => router.push({name: 'admin'})
// Quit
const quit = () => {
  let name = store.name
  reset().then(() => {
    ElNotification({
      title: '退出成功！',
      message: name + '，我会想你的 (つ﹏<。)',
      type: 'success'
    })
  })
}
// 重置store、localStorage
const reset = async() => {
  store.$reset()
  localStorage.clear()
  await router.push({name: 'home'})
  reload()
}
// reload页面 从app.vue调用的方法
const reload = inject('Reload')
</script>

<style scoped>
.nav-bar {
  z-index: 10;
  height: 4.5rem;
  width: 100%;
  padding: .5rem 0 .5rem 0;
  /* 父容器开启flex布局 */
  display: flex;
  /* 水平居中 */
  justify-content: center;
  align-items: center;
}
.nav-menu {
  height: 100%;
  width: 62%;
  /* border: 1px solid rgb(0, 255, 81); */
  background-color: transparent;
}
.nav-menu-left {
  height: 100%;
  width: 50%;
  float: left;
  width: 50%;
  /* 水平居中 */
  display: flex;
  align-items: center;
}
.nav-menu-right {
  height: 100%;
  width: 50%;
  float: right;
  /* 水平居中 */
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.logo {
  height:40px;
  width: 40px;
}
.logo > a {
  display: block;
  height: 100%;
  width: 100%;
}
.logo > a > img {
  width: 100%;
  height: auto;
}
.background1 {
  background-color: transparent;
  transition: all 0.2s ease-in-out 0.2s;
  -webkit-transition: all 0.2s; /* Safari */
}
.background2 {
  background-color: #4dcdef;
  transition: all 0.2s ease-in-out 0.2s;
  -webkit-transition: all 0.2s; /* Safari */
}
.navOn{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.2s ease-in-out 0.2s;
  -webkit-transition: all 0.2s; /* Safari */
  transform: translateZ(0);
}
.navOff{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.2s ease-in-out 0.2s;
  -webkit-transition: all 0.2s; /* Safari */
  transform: translate3d(0,-100%,0);
}
.dropdown {
  margin-left: 10%;
}
.dropdown-link {
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: 16px;
}
.dropdown-link:hover {
  color: rgba(255, 255, 255, 0.6);
}
.dropdown-link:active {
  color: #CDD0D6;
}
.dropdown-link-menu {
  width: 200px;
}
</style>